<template>
    <div class="default-main view-main">
        <Table ref="tableRef"></Table>
        <Dialog></Dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, provide } from 'vue';
import { TableApi, TableState } from '@/components/table/table';
import { UserTableDataState, UserTableDialogState } from '@/views/admin/user/interface';
import Table from '@/components/table/index.vue';
import { defaultOptButtons } from '@/components/table/index';
import Dialog from '@/views/admin/user/dialog.vue';
import { useRouter } from 'vue-router';

defineOptions({
    name: 'AdminUser',
});

const router = useRouter();
const tableRef = ref();
const state = new TableState<UserTableDataState, UserTableDialogState>(
    new TableApi(
        new Map([
            ['page', '/api/web/user/queryByPage'],
            ['add', '/api/web/user/add'],
            ['edit', '/api/web/user/update'],
            ['delete', '/api/web/user/delete'],
        ])
    ),
    {
        pk: ['user_id'],
        pagination: true,
        columns: [
            {
                type: 'selection',
                align: 'center',
                width: 55,
            },
            {
                prop: 'user_id',
                label: '用户ID',
                enableColumnDisplayControl: false,
            },
            {
                prop: 'login_name',
                label: '登陆账号',
            },
            {
                prop: 'nick_name',
                label: '昵称',
            },
            {
                show: false,
                prop: 'create_time',
                label: '创建时间',
                width: 220,
            },
            {
                render: 'buttons',
                label: '操作',
                align: 'center',
                width: 220,
                buttons: [
                    ...defaultOptButtons(['edit', 'delete'], 'default'),
                ],
            },
        ],
        condition: {
            page_no: 1,
            page_size: 10,
        },
    },
    new UserTableDataState(),
    new UserTableDialogState(),
    {
        header: {
            title: '用户列表管理',
            buttons: ['refresh', 'add', 'edit'],
        },
        form: {
            param_name: 'user',
        },
    }
);

state.list();
// 绑定属性
provide('state', state);
</script>
